<template>
  <div id="map"></div>
</template>

<script setup>
import mapboxgl from "mapbox-gl"; // or "const mapboxgl = require('mapbox-gl');"
import style from "./style.json";
import { onMounted } from "vue";

mapboxgl.accessToken =
  "pk.eyJ1IjoiNzUyODQxNzI4IiwiYSI6ImNsbGdiNnJoNTB6ZjIzcW8xMjVudjJtOGUifQ.u6q8oswvLpgvjdp3nW76jg";

function initMap() {
  const map = new mapboxgl.Map({
    container: "map", // container ID
    style: style,
    center: [-74.5, 40], // starting position [lng, lat]
    zoom: 9, // starting zoom
  });
}

onMounted(() => {
  initMap();
});
</script>

<style scoped>
#map {
  width: 500px;
  height: 500px;
}
</style>
